<route lang="json5" type="home">
  {
    layout: 'tabbar',
    style: {
      navigationStyle: 'custom',
      navigationBarTitleText: '业主首页',
    },
  }
</route>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useUserStore } from '@/store/user'

const echarts = require('../../uni_modules/lime-echart/static/echarts.min.js')

const userStore = useUserStore()

// 该页面所需的数据
const waterChart = ref(null)
const powerChart = ref(null)

const addressColumns = ref([
  { label: '6号楼501', value: '1001' },
  { label: '6号楼502', value: '1002' },
  { label: '7号楼101', value: '2001' },
  { label: '7号楼102', value: '2002' },
])
const currentAddress = ref('1001')

const currentAddressLabel = computed(() => {
  const selectedItem = addressColumns.value.find(item => item.value === currentAddress.value)
  return selectedItem ? selectedItem.label : ''
})

function onConfirm({ value }) {
  console.log(value)
  currentAddress.value = value
}

const waterOption = {
  xAxis: {
    type: 'category',
    show: true,
    data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10'],
    axisLine: {
      show: true,
      lineStyle: {
        color: '#E5E7EB',
      },
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      color: '#9CA3AF',
    },
  },
  yAxis: {
    type: 'value',
    show: true,
    axisLabel: {
      color: '#9CA3AF',
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: '#F3F4F6',
        type: 'dashed',
      },
    },
    splitNumber: 3,
  },
  grid: {
    left: '12%',
    right: '5%',
    top: '10%',
    bottom: '20%',
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320, 1100, 1000, 100],
      type: 'line',
      smooth: true,
      showSymbol: true,
      symbol: 'circle',
      symbolSize: 8,
      lineStyle: {
        color: '#00FFFF',
        width: 2,
      },
      itemStyle: {
        color: '#00FFFF',
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(0, 255, 255, 0.3)',
          },
          {
            offset: 1,
            color: 'rgba(0, 255, 255, 0)',
          },
        ]),
      },
    },
  ],
}

const powerOption = {
  xAxis: {
    type: 'category',
    show: true,
    data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10'],
    axisLine: {
      show: true,
      lineStyle: {
        color: '#E5E7EB',
      },
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      color: '#9CA3AF',
    },
  },
  yAxis: {
    type: 'value',
    show: true,
    axisLabel: {
      color: '#9CA3AF',
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: '#F3F4F6',
        type: 'dashed',
      },
    },
    splitNumber: 3,
  },
  grid: {
    left: '12%',
    right: '5%',
    top: '10%',
    bottom: '20%',
  },
  series: [
    {
      data: [1220, 1132, 1001, 934, 890, 930, 1120, 1320, 1150, 1050],
      type: 'line',
      smooth: true,
      showSymbol: true,
      symbol: 'circle',
      symbolSize: 8,
      lineStyle: {
        color: '#DC2626',
        width: 2,
      },
      itemStyle: {
        color: '#DC2626',
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(220, 38, 38, 0.3)',
          },
          {
            offset: 1,
            color: 'rgba(220, 38, 38, 0)',
          },
        ]),
      },
    },
  ],
}

onMounted(() => {
  setTimeout(async () => {
    if (waterChart.value) {
      const waterChartInstance = await waterChart.value.init(echarts)
      waterChartInstance.setOption(waterOption)
    }
    if (powerChart.value) {
      const powerChartInstance = await powerChart.value.init(echarts)
      powerChartInstance.setOption(powerOption)
    }
  }, 200) // A small delay to ensure the component is ready
})

onLoad(() => {
  console.log('onLoad')
  if (userStore.role === 'admin') {
    uni.switchTab({
      url: '/pages/admin/index',
    })
  }
})
</script>

<template>
  <view class="h-screen flex flex-col">
    <!-- Header -->
    <view class="bg-[#0D8EFF] p-6 pt-16 text-white shadow-md">
      <view class="text-2xl font-bold">
        Hello, D先生.!
      </view>
      <view class="mt-1 text-sm opacity-80">
        What controls do you want to manage today.!
      </view>
    </view>
    <!-- Notice Bar -->
    <wd-notice-bar text="将在后天停电" type="info" background-color="#F5F5F5" color="#8A8A8A">
      <template #prefix>
        <wd-icon name="warning" size="32rpx" color="#000" custom-class="mr-2" />
      </template>
    </wd-notice-bar>

    <scroll-view :scroll-y="true" class="flex-1 bg-gray-50 pb-20">
      <!-- Main Actions Grid -->
      <view class="pb-2">
        <wd-grid :column="4" :border="false" bg-color="#0D8EFF" clickable>
          <wd-grid-item use-slot url="/pages-user/user/waterRecharge/index" link-type="navigateTo">
            <view class="flex flex-col items-center justify-center py-2">
              <!-- <wd-icon name="apple-filled" size="22px" /> -->
              <image src="/static/images/icon_1.png" mode="widthFix" class="h-[48rpx] w-[48rpx]" />
              <view class="mt-2 text-xs text-white">
                水表充值
              </view>
            </view>
          </wd-grid-item>
          <wd-grid-item use-slot url="/pages-user/user/electricityRecharge/index" link-type="navigateTo">
            <view class="flex flex-col items-center justify-center py-2">
              <!-- <wd-icon name="apple-filled" size="22px" /> -->
              <image src="/static/images/icon_2.png" mode="widthFix" class="h-[48rpx] w-[48rpx]" />
              <view class="mt-2 text-xs text-white">
                电表充值
              </view>
            </view>
          </wd-grid-item>
          <wd-grid-item use-slot url="/pages-user/user/repair/index" link-type="navigateTo">
            <view class="flex flex-col items-center justify-center py-2">
              <!-- <wd-icon name="apple-filled" size="22px" /> -->
              <image src="/static/images/icon_3.png" mode="widthFix" class="h-[48rpx] w-[48rpx]" />
              <view class="mt-2 text-xs text-white">
                一键报修
              </view>
            </view>
          </wd-grid-item>
          <wd-grid-item use-slot url="/pages-user/user/wallet/index" link-type="navigateTo">
            <view class="flex flex-col items-center justify-center py-2">
              <!-- <wd-icon name="apple-filled" size="22px" /> -->
              <image src="/static/images/icon_4.png" mode="widthFix" class="h-[48rpx] w-[48rpx]" />
              <view class="mt-2 text-xs text-white">
                钱包
              </view>
            </view>
          </wd-grid-item>
        </wd-grid>
        <wd-grid :column="4" :border="false" clickable>
          <wd-grid-item use-slot url="/pages-user/user/waring/index" link-type="navigateTo">
            <view class="flex flex-col items-center justify-center py-2">
              <!-- <wd-icon name="apple-filled" size="22px" /> -->
              <image src="/static/images/icon_5.png" mode="widthFix" class="h-[60rpx] w-[60rpx]" />
              <view class="mt-1 text-xs">
                智能预警
              </view>
            </view>
          </wd-grid-item>
          <wd-grid-item use-slot url="/pages-user/user/operationHistory/index" link-type="navigateTo">
            <view class="flex flex-col items-center justify-center py-2">
              <!-- <wd-icon name="apple-filled" size="22px" /> -->
              <image src="/static/images/icon_6.png" mode="widthFix" class="h-[60rpx] w-[60rpx]" />
              <view class="mt-1 text-xs">
                操作历史
              </view>
            </view>
          </wd-grid-item>
          <wd-grid-item use-slot link-type="navigateTo" url="/pages-user/user/message/index">
            <view class="flex flex-col items-center justify-center py-2">
              <!-- <wd-icon name="apple-filled" size="22px" /> -->
              <image src="/static/images/icon_7.png" mode="widthFix" class="h-[60rpx] w-[60rpx]" />
              <view class="mt-1 text-xs">
                消息列表
              </view>
            </view>
          </wd-grid-item>
          <wd-grid-item use-slot url="/pages-user/user/repair/record" link-type="navigateTo">
            <view class="flex flex-col items-center justify-center py-2">
              <!-- <wd-icon name="apple-filled" size="22px" /> -->
              <image src="/static/images/icon_8.png" mode="widthFix" class="h-[60rpx] w-[60rpx]" />
              <view class="mt-1 text-xs">
                报修记录
              </view>
            </view>
          </wd-grid-item>
        </wd-grid>
      </view>

      <!-- Usage Stats -->
      <view class="p-2">
        <view class="mb-4 flex items-center">
          <wd-picker v-model="currentAddress" :columns="addressColumns" use-default-slot @confirm="onConfirm">
            <view class="flex items-center border border-gray-300 rounded-md bg-white px-3 py-1 text-sm shadow-sm">
              <wd-icon name="home" size="16px" custom-class="mr-2" />
              <text>{{ currentAddressLabel }}</text>
              <wd-icon name="arrow-down" size="16px" custom-class="ml-2" />
            </view>
          </wd-picker>
        </view>

        <view class="flex flex-col space-y-4">
          <!-- Water Consumption -->
          <view class="flex-1 rounded-lg bg-white p-4 shadow-sm">
            <view class="flex items-center justify-between">
              <view class="flex items-center">
                <text class="mr-2 text-xs font-medium">
                  水表
                </text>
                <text class="text-xs font-medium">
                  已使用32.5吨
                </text>
              </view>
              <wd-icon name="droplet" size="20px" />
            </view>
            <view class="h-40 w-full">
              <l-echart ref="waterChart" />
            </view>
          </view>
          <!-- Power Usage -->
          <view class="flex-1 rounded-lg bg-white p-4 shadow-sm">
            <view class="flex items-center justify-between">
              <view class="flex items-center">
                <text class="mr-2 text-xs font-medium">
                  电表
                </text>
                <text class="text-xs font-medium">
                  已使用47度
                </text>
              </view>
              <wd-icon name="lightning" size="20px" />
            </view>
            <view class="h-40 w-full">
              <l-echart ref="powerChart" />
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>
